语法
animation-play-state: running | paused 检索或设置对象动画的状态。
| 语法项目 | 说明 |
|---|---|
| 初始值 | running |
| 适用于 | 所有元素 |
| 可否继承 | 否 |
| 媒介 | 视觉 |
| 版本 | CSS3.0 |
说明
animation-play-state检索或设置对象动画的状态，如果提供多个属性值，以逗 号进行分隔。
取值
running：默认值。运动
paused：暂停
实例代码
CSS
.play-state{
-webkit-animation:f1 2s 0.5s 2 linear forwards alternate;
-moz-animation:f1 2s 0.5s 2 linear forwards alternate;
position:relative;
left:10px;
width:100px;
height:100px;
margin:10px 0;
overflow:hidden;
}
.play-state:hover{
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
}
@-webkit-keyframes f1{
0%{left:10px;}
100%{left:500px;}
}
@-moz-keyframes f1{
0%{left:10px;}
100%{left:500px;}
}
HTML
运行一下 »
<div class="demo_box play-state">鼠标移过来我就停，移走就运动，好听话哦！</div>
兼容性
| IE | Firefox | Opera | Safari | Chrome |
|---|---|---|---|---|
| IE 10+ | Firefox 3.5+ | 目前暂无版本支持 | Safari 10+ | Chrome 2.0+ |